//锁客金额页面
import React,{Component} from 'react'
import {  Link  } from 'react-router-dom'
import {Breadcrumb,Divider ,message,Button,Modal ,Input,Form} from 'antd'
import * as tools from '../../../tools/tools'
import $ from 'jquery'
import './LockGuestAmount.css'


const FormItem = Form.Item;

class LockGuestAmount extends Component{
  constructor(props){
    super(props)
    this.state={
      Lockvisible:false
    }
  }
  componentWillMount(){
    this.Lockmoney();
  }

  Lockmoney=()=>{
    tools.loginView(this).then(
      $.ajax({
        type:'post',
        url:tools.apiUrl+"payment/conifg_info",
        data:{
          token:localStorage.token,
          config_key:'bind_user_amount'
        },
        success:(res)=>{
          if(res.status ==1){
            this.setState({
              Lockdata:res.result
            })
          }else{
            message.error(res.msg)
          }
        }
      })
    )
  }

  LockGuestmodify=()=>{     //修改金额
    this.setState({
      Lockvisible:true
    })
  }

  handleSubmit=()=>{      //修改金额确认回调
    this.props.form.validateFields((err, values) => {
      console.log(values)
      values.config_key ="bind_user_amount";
      values.token = localStorage.token;
      if (!err) {
        tools.loginView(this).then(
          $.ajax({
              type:'Post',
              url: tools.apiUrl+'payment/edit_conifg',
              data:values,
              success:(res)=>{
                console.log(res)
                if(res.status ==1){
                  this.Lockmoney();
                  this.setState({
                    Lockvisible:false
                  })
                  this.props.form.resetFields();
                }
              },
          })
        )
      }
    })
  }
  LockCancel=()=>{
    this.setState({
      Lockvisible:false
    })
  }

  lockGoback=()=>{
    this.props.history.push("/HomePage/PaymentManagement")
  }

  render(){
    const { getFieldDecorator } = this.props.form;
    return(
      <div className="tariff_box">
        <div>
          <Breadcrumb>
            <Breadcrumb.Item >
              支付管理
            </Breadcrumb.Item>
            <Breadcrumb.Item >
              费率管理   
            </Breadcrumb.Item>
            <Breadcrumb.Item >
              锁客金额   
            </Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <Divider />

        <div>
          <div className="traiff_content">
            <div className="LockGuest_title">
              <div>基本信息</div>
              <Button onClick={this.lockGoback}>返回</Button>
            </div>
            <Divider />
            <div className="LockGuest_sum">
              <div>锁客金额</div>
              <div>{this.state.Lockdata?this.state.Lockdata.value:false}</div>
              <div><Button type="primary" onClick={this.LockGuestmodify}>修改</Button></div>
            </div>
          </div>
        </div>
        <Modal
        visible={this.state.Lockvisible}
        mask={false}
        maskClosable={false}
        onOk={this.handleSubmit}
        onCancel={this.LockCancel}
        >
          <Form layout="vertical" onSubmit={this.handleSubmit}>
            <FormItem label="锁客金额"  >                                              {/* rules是控制其内容，required是否显示图标 message输入错误提示  min max最小最大输入字段 */}
                {getFieldDecorator('config_value',{
                  rules:[{required:true ,message:' '}]
                })(
                    <input placeholder="请输入金额" />    
                )}
            </FormItem>
            <FormItem label="变更备注"  >                                              {/* rules是控制其内容，required是否显示图标 message输入错误提示  min max最小最大输入字段 */}
                {getFieldDecorator('remark',{
                  rules:[{required:true ,message:' '}]
                })(
                    <textarea cols="70" rows="3" placeholder="请输入备注，最多150字"  maxLength="150" style={{resize:'none'}}/>    
                )}
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
}

const newLockGuestAmount  = Form.create()(LockGuestAmount);
export default newLockGuestAmount